@import "../opterator-tasks-list/opterator-tasks-list.component.scss";
.head-title{
    font-size: 2.34375vw;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
}
.head-user{
  display: flex;
  align-items: center;
  font-size: 2.34375vw;
  font-weight: 400;
  color: #999;
}
.back-icon{
  width: 2.8125vw;
  height: 2.8125vw;
  line-height:3vw ;
  margin-left: .39063vw;
}
.content-mid{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  height: 6.71875vw;
  margin-top: .78125vw;
 .mid-numbers {
    height: 6.71875vw;
    background: #fff;
    border-radius: 1.17188vw;
    padding: 1.5625vw;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    .number-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      .number-item-num {
        font-size: 1.875vw;
        font-weight: 500;
        color: $devui-brand
      }
      .number-item-text {
        font-size: 1.09375vw;
        color: #a3a7b3;
        margin-top: .23438vw;
      }
    }

  }
  .mid-operates{
    height: 6.71875vw;
    background: #fff;
    border-radius: 1.17188vw;
    margin-left: .78125vw;
    padding: 1.5625vw;
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
     .operate-btn {
      cursor: pointer;
      width: 10.15625vw;
      height: 3.59375vw;
      background: #e3e3e3;
      border-radius: .625vw;
      font-size: 1.09375vw;
      font-weight: 500;
      color: #666;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .active {
      background: $devui-brand;
      color: #fff;
    }
    .ml15 {
      margin-left: 1.17188vw;
    }
  }
}
.rotate {
  transform: rotate(90deg);
}
.content-wrap{
  height: 0;
  flex-grow: 653;
  padding: 0 1.95313vw;
  display: flex;
  flex-direction: column;
  .content-top{
    .list-item {
      width: 100%;
      background: #fff;
      margin-top: .03125vw;
      position: relative;
      border-radius: 1.17188vw;
       .list-line {
        position: absolute;
        left: 1.5625vw;
        top: -.46875vw;
        width: 12.5vw;
        height: .9375vw;
        border-radius: .78125vw;
        z-index: 12;
        background: #ed572a;
      }
      .list-top {
        padding: 1.95313vw 1.17188vw;
        position: relative;
        border-radius: 1.17188vw 1.17188vw 0 0;
        background: #fff2e8;
        border: .15625vw solid #ed572a;
        box-sizing: border-box;
        .order-info{
          font-size: 1.25vw;
          color: #333;
          flex-shrink: 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .order-info-items{
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 0%;
            .order-info-items-row{
              display: flex;
              flex-direction: row;
              margin-top: 5px;
              .order-info-item{
                flex-grow: 1;
                flex-shrink: 1;
                flex-basis: 0%;
              }
            }
          }
          .order-status{
            width: 8.1vw;
            color: #ff8620;
            flex-shrink: 0;
            .status-number {
              font-size: 2.1875vw;
              text-align: right;
            }
            .status-label{
              font-size: 1.25vw;
              font-weight: 600;
              margin-top: .3125vw;
              text-align: right;
          }
          }
        }
      }

    }
  }
  .content-bot{
    flex: 1;
    display: flex;
    justify-content: space-between;
    height: 0;
    margin: .78125vw 0;
    .bot-left{
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
      background: #fff;
      border-radius: 1.17188vw;
      width: 0;
      .bot-head{
        padding: .78125vw;
        font-size: 1.32813vw;
        font-weight: 500;
        color: #333;
        border-bottom: 1px solid #efefef;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0;
        .bot-head-r{
          display: flex;
          flex-direction: row;
          .head-sop{
            width: 7.65625vw;
            height: 2.65625vw;
            background: #fff;
            border-radius: .625vw;
            border: 1px solid $devui-brand;
            font-weight: 400;
            color: $devui-brand;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 1vw;
          }
        }

      }
      .bot-context{
        padding: .78125vw;
        overflow: auto;
        flex: 1;
        .context-form{
          display: flex;
          flex-wrap: wrap;
          flex-direction: row;
          align-content: flex-start;
          overflow: auto;
          .form-input{
            align-items: center;
            margin-right: 1.95313vw;
            .input{
              width: 23.4375vw;
              height: 3.125vw;
              background: #fff;
              border-radius: .625vw;
              margin-left: .78125vw;
              display: flex;
              align-items: center;
              input{
                height: 90%!important;
              }
            }
            .title{
              flex-shrink: 0;
              width: 5.46875vw;
              font-size: 1.25vw;
              color: #333;
            }
          }
          .form-items{
            .items-title{
              font-size: 1.25vw;
              color: #333;
              span.title-add{
                color: $devui-brand;
                margin-left: 1.17188vw;
              }
            }
            .items-content{
              display: flex;
              .item-content{
                margin-right: 1.5625vw;
                .flex-c-center {
                  display: flex;
                  align-items: center;
                  .item-content-input {
                    width: 11.71875vw;
                    height: 2.8125vw;
                    margin-right: .78125vw;
                    display: flex;
                    align-items: center;
                    input{
                      height: 90%!important;
                    }
                  }
                  .item-content-icon {
                    width: 1.25vw;
                    height: 1.25vw;
                  }
                  }
                .item-content-button{
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 11.71875vw;
                  height: 2.5vw;
                  background: rgba(163, 167, 179, .1);
                  border-radius: .46875vw;
                  border: 1px solid #a3a7b3;
                  font-size: 1.09375vw;
                  color: #666;
                  box-sizing: border-box;
                  margin-right: .78125vw;
                  margin-top: .78125vw;
                  &.active{
                    background: $devui-brand-foil	;
                    border: 1px solid $devui-brand;
                    color: $devui-brand;
                  }
                }
              }
            }
          }

        }
      }
      .bot-footer{
        padding: .78125vw;
        border-top: 1px solid #efefef;
        display: flex;
        justify-content: space-between;
        flex-shrink: 0;
        font-size: 1.32813vw;
        .footer-btns {
          display: flex;
          cursor: pointer;
          align-items: center;
          .footer-btn{
            width: 8.59375vw;
            height: 2.8125vw;
            background: #fff;
            border-radius: .625vw;
            border: 1px solid #979797;
            font-size: 1.09375vw;
            font-weight: 500;
            color: #333;
            display: flex;
            align-items: center;
            justify-content: center;
            &.active{
              background: $devui-brand;
              border: none;
              color: #fff;
              margin-left: 1.5625vw;
            }
          }
        }
      }
    }
    .form-item {
      display: flex;
      align-items: center;
      margin-right: 1.95313vw;
      margin-top: 20px;
    .title {
        flex-shrink: 0;
        width: 5.46875vw;
        font-size: 1.25vw;
        color: #333;
    }
    }
    .bot-keyboard{
      display: flex;
      flex-shrink: 0;
      align-content: flex-start;
      height: 100%;
      width: 29.29688vw;
      background: #fff;
      border-radius: 1.17188vw;
      padding: .78125vw;
      box-sizing: border-box;
      flex-wrap: wrap;
      margin-left: .78125vw;
      .keyboard-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 8.82813vw;
        height: calc(25% - .23438vw);
        max-height: 7.8125vw;
        background: $devui-brand;
        font-size: 1.5625vw;
        font-weight: 500;
        color: #fff;
        margin-top: .23438vw;
        margin-right: .23438vw;
         .keyboard-item-icon {
          width: 1.875vw;
          height: 1.875vw;
      }
    }
    }
  }
}
.footer-wrap{
  position: relative;
  z-index: 100;
  background: $devui-brand;
  padding: 0 2.34375vw;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .footer-items{
    display: flex;
    .footer-item{
      position: relative;
      width: 8.125vw;
      height: 4.84375vw;
      font-size: 1.25vw;
      font-weight: 600;
      color: hsla(0, 0%, 100%, .75);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      &.active{
        background:$devui-brand-active;
        color: #fff;
      }
    }
  }
  .footer-time{
    font-size: 1.25vw;
    font-weight: 500;
    color: #fff;
  }
}
d-radio-group{
  margin-left:1.1vw ;
}
:host::ng-deep .devui-radio{
  margin-right: 2.5vw!important;
  height: 2.5vw;
}
:host::ng-deep .devui-radio .devui-radio-label {
  color: var(--devui-text, #252b3a);
  font-size: 1.09375vw!important;
  margin-left: 8px;
}
.status-start-line{
  background: $devui-info-line!important;
}
.status-start-list{
  background: $devui-info-bg!important;
  border: .15625vw solid $devui-info-line!important;
}
.status-start-color{
  color: $devui-info!important;
}
.status-end-line{
  background: $devui-success-line!important;
}
.status-end-list{
  background: $devui-success-bg!important;
  border: .15625vw solid $devui-success-line!important;
}
.status-end-color{
  color: $devui-success!important;
}
.status-paused-line{
  background: $devui-disabled-text!important;
}
.status-paused-list{
  background: $devui-disabled-bg!important;
  border: .15625vw solid $devui-disabled-line!important;
}
.status-paused-color{
  color: $devui-disabled-text!important;
}
.isPause {
  pointer-events: none;
  position:relative;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: $devui-disabled-bg;
    opacity: 0.7; // 你可以根据需要调整这个值
  }
}

.form-items{
  display: flex;
  flex-direction: row;
  align-items: center ;
  .items-title{
    font-size: 1.25vw;
    color: #333;
    span.title-add{
      color: $devui-brand;
      margin-left: 1.17188vw;
    }
  }
  .items-content{
    display: flex;
    margin-left: 1.1vw;
    .item-content{
      margin-right: 1.5625vw;
      .flex-c-center {
        display: flex;
        align-items: center;
        .item-content-input {
          width: 11.71875vw;
          height: 2.8125vw;
          margin-right: .78125vw;
          input{
            height: 90%!important;
          }
        }
        .item-content-icon {
          width: 1.25vw;
          height: 1.25vw;
        }
        }
      .item-content-button{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 11.71875vw;
        height: 2.5vw;
        background: rgba(163, 167, 179, .1);
        border-radius: .46875vw;
        border: 1px solid #a3a7b3;
        font-size: 1.09375vw;
        color: #666;
        box-sizing: border-box;
        margin-right: .78125vw;
        margin-top: .78125vw;
        &.active{
          background: $devui-brand-foil	;
          border: 1px solid $devui-brand;
          color: $devui-brand;
        }
      }
    }
  }
}
